<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html;charset=UTF-8" encoding="UTF-8">
    <h:head>

    </h:head>

    <h:body>

        <h:form id="form">
            <p:messages id="msgs" showDetail="true"/>

            <h:panelGrid columns="2" cellpadding="5">

                <h:outputText value="Ajax Rate:"/>
                <p:rating id="ajax" value="#{rating001.rating1}">
                    <p:ajax event="rate" listener="#{rating001.onrate}" update="form:msgs"/>
                    <p:ajax event="cancel" listener="#{rating001.oncancel}" update="form:msgs"/>
                </p:rating>

                <h:outputText value="Readonly:"/>
                <p:rating id="readonly" value="#{rating001.rating2}" readonly="true"/>

                <h:outputText value="Disabled"/>
                <p:rating id="disabled" value="#{rating001.rating2}" disabled="true"/>

                <h:outputText value="Min/Max"/>
                <p:rating id="minmax" value="#{rating001.rating3}" stars="8"/>
            </h:panelGrid>

            <p:commandButton id="button" value="Submit" update="@form"/>
        </h:form>

    </h:body>
</f:view>

</html>